<template>
	<view class="show">
		<view class="head-portrait">
			<image :src="initData.image" />
			<view class="dots">{{ dots + 1 }}/{{ banner.length }}</view>
		</view>
		<view class="banner">
			<swiper class="swiper" :indicator-dots="true" :interval="5000" :duration="500" :circular="true" @change="changePage">
				<swiper-item v-for="(items, index) in banner" :key="index" @click="preview(index)"><image style="width: 100%;" :src="items" mode="aspectFit" /></swiper-item>
			</swiper>
		</view>
		<view class="text">
			<view :class="{ more: more }">{{ initData.comment }}</view>
			<text class="right" @click="more = true" v-show="!more" v-if="initData.comment">
				展开
				<i class="cubeic-select"></i>
			</text>
		</view>
	</view>
</template>

<script>
import interact from '../../../servers/shop/interact.js';
export default {
	data() {
		return {
			banner: [],
			dots: 0,
			more: false,
			id: '',
			initData: ''
		};
	},
	mounted() {
		var _this = this
		this.id = uni.getStorageSync('shopbuyersShowdetails')||this.$route.query.shopbuyersShowdetails
		this.getdata()
	},
	methods: {
		getdata() {
			interact
				.detail(this.id)
				.then(res => {
					this.initData = res.data;
					this.initData.image = this.imgCDNUrl + this.initData.avator;
					if (this.initData.img) {
						for (var i = 0; i < this.initData.img.length; i++) {
							this.initData.img[i] = this.imgCDNUrl + this.initData.img[i];
						}
					}
					this.banner = this.initData.img;
					console.log(this.initData);
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		preview(e) {
			uni.previewImage({
				current: e,
				urls: this.banner,
				longPressActions: {
					itemList: ['保存图片', '收藏'],
					success: function(data) {
						// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						// console.log(err.errMsg);
					}
				}
			});
		},
		changePage(current) {
			this.dots = current.detail.current;
			// console.log('当前轮播图序号为:' + current)
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.show {
	min-height: 100%;
	background: #fff;
	.head-portrait {
		padding: 20rpx 20rpx 0;
		position: relative;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
		.dots {
			position: absolute;
			top: 40rpx;
			right: 20rpx;
			width: 91rpx;
			height: 46rpx;
			line-height: 46rpx;
			background: #999;
			color: #fff;
			border-radius: 22rpx;
			text-align: center;
			font-size: 28rpx;
		}
	}
	.banner {
		position: relative;
		padding: 0 20rpx;
		margin: 40rpx 0;
		.swiper {
			height: 850rpx;
			padding: 20rpx;
			border: 1px solid #efefef;
			image {
				width: 100%;
				height: 850rpx;
				background: #efeff4;
			}
		}
	}
	.text {
		position: relative;
		padding: 0 20rpx;
		view {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			font-size: 28rpx;
			line-height: 52rpx;
		}
		view.more {
			overflow: initial;
			-webkit-line-clamp: inherit;
		}
		.right {
			position: absolute;
			bottom: 10rpx;
			right: 20rpx;
			// background: #fff;
			color: #bd3c8c;
			padding-left: 50rpx;
		}
	}
}
</style>
